<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

// 定义props
const props = defineProps({
  id: {
    type: String,
    default: null
  }
})

// 定义预约表单数据
const bookingData = ref({
  name: '',
  phone: '',
  date: '',
  time: '',
  furnitureType: '',
  furnitureName: '',
  notes: ''
})

// 可用的预约时间段
const availableTimes = ['10:00', '11:00', '13:00', '14:00', '15:00', '16:00', '17:00']

// 可用的家具类型
const furnitureTypes = ['沙发', '床', '餐桌', '椅子', '其他']

// 模拟家具数据
const furnitureItems = [
  { id: '1', name: '舒适布艺沙发', category: '沙发' },
  { id: '2', name: '木质单人床架', category: '床' },
  { id: '3', name: '橡木餐桌套装', category: '餐桌' },
  { id: '4', name: '休闲靠背椅', category: '椅子' },
]

const route = useRoute()

// 初始化表单数据
onMounted(() => {
  // 从路由参数或props中获取家具ID
  const furnitureId = route.params.id || props.id
  if (furnitureId) {
    const furniture = furnitureItems.find(item => item.id === furnitureId)
    if (furniture) {
      bookingData.value.furnitureType = furniture.category
      bookingData.value.furnitureName = furniture.name
    }
  }
})

// 提交预约表单
const submitBooking = () => {
  // 这里可以添加表单验证逻辑
  if (!bookingData.value.name || !bookingData.value.phone || !bookingData.value.date || !bookingData.value.time) {
    alert('请填写必填字段')
    return
  }

  // 模拟提交成功
  alert('预约成功！我们将尽快与您联系确认。')
  // 重置表单
  Object.keys(bookingData.value).forEach(key => {
    bookingData.value[key] = ''
  })
}
</script>

<template>
  <div class="booking-container">
    <h2>家具到店预约</h2>
    <form @submit.prevent="submitBooking" class="booking-form">
      <div class="form-group">
        <label for="name">姓名 *</label>
        <input type="text" id="name" v-model="bookingData.name" required>
      </div>

      <div class="form-group">
        <label for="phone">联系电话 *</label>
        <input type="tel" id="phone" v-model="bookingData.phone" required>
      </div>

      <div class="form-group">
        <label for="date">预约日期 *</label>
        <input type="date" id="date" v-model="bookingData.date" required>
      </div>

      <div class="form-group">
        <label for="time">预约时间 *</label>
        <select id="time" v-model="bookingData.time" required>
          <option value="">请选择时间</option>
          <option v-for="time in availableTimes" :key="time" :value="time">{{ time }}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="furnitureType">意向家具类型</label>
        <select id="furnitureType" v-model="bookingData.furnitureType">
          <option value="">请选择类型</option>
          <option v-for="type in furnitureTypes" :key="type" :value="type">{{ type }}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="furnitureName">意向家具名称</label>
        <input type="text" id="furnitureName" v-model="bookingData.furnitureName" readonly>
      </div>

      <div class="form-group">
        <label for="notes">备注信息</label>
        <textarea id="notes" v-model="bookingData.notes" rows="3"></textarea>
      </div>

      <div class="store-location">
  <div class="location-icon">📍</div>
  <div>
    <p>门店地址：武汉市黄陂区金马凯旋家居博览城F馆</p>
    <a href="https://map.baidu.com/poi/金马凯旋家居博览城F馆" target="_blank" class="map-link">查看导航路线 →</a>
  </div>
</div>
<button type="submit" class="submit-btn">提交预约~</button>
    </form>
  </div>
</template>

<style scoped>
.booking-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF8E1; /* 温暖米色背景 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #5D4037; /* 深棕色标题 */
  margin-bottom: 20px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label {
  font-weight: 500;
  color: #5D4037; /* 深棕色标签 */
}

input, select, textarea {
  padding: 10px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  font-size: 16px;
  background-color: #FFFFFF;
}

.store-location {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: #FFF8E1;
  border-radius: 8px;
  margin-bottom: 20px;
}

.location-icon {
  font-size: 24px;
}

.map-link {
  color: #FFB347;
  text-decoration: underline;
}

.submit-btn {
  padding: 12px;
  background-color: #FFCC80;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  background-color: #FFB74D; /* 深橙色悬停效果 */
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #FFCC80; /* 暖橙色边框 */
  box-shadow: 0 0 0 2px rgba(255, 204, 128, 0.2);
}
</style>